<template>
  <div class="search-wrap">
    <form
      class="m-input-box border-bottom"
      @submit.prevent="search(currentSearchKey)"
    >
      <input
        type="search"
        name="search"
        class="input"
        placeholder="搜索歌手、歌曲、专辑"
        autocomplete="off"
        @input="getSuggest($event.target.value)"
        v-model="currentSearchKey"
      />
    </form>

    <!-- 搜索结果状态 -->
    <SongList v-if="showResult" :list="songList" />

    <!-- 搜索推荐状态 -->
    <SearchSuggest
      v-else-if="searchSuggestList.length"
      :keyword="currentSearchKey"
      :suggestList="searchSuggestList"
      @search="search"
    />
    <!-- 默认状态 -->
    <DefaultSearchState
      v-else
      :historyKey="historyKey"
      :hotkeys="hotkeys"
      @search="search"
      @deleteHistoryKey="deleteHistoryKey"
      @clickKey="clickKey"
    />
  </div>
</template>

<script>
import { defineComponent } from "vue";

import DefaultSearchState from "./DefaultSearchState";
import SearchSuggest from "./SearchSuggest";
import { useHotSearchKeys } from "../hooks/search";

export default defineComponent({
  components: {
    DefaultSearchState,
    SearchSuggest,
  },
  async setup() {
    const {
      hotkeys,
      clickKey,
      historyKey,
      deleteHistoryKey,
      search,
      songList,
      currentSearchKey,
      showResult,
      getSuggest,
      searchSuggestList,
    } = await useHotSearchKeys();
    return {
      hotkeys,
      clickKey,
      historyKey,
      deleteHistoryKey,
      search,
      currentSearchKey,
      getSuggest,
      searchSuggestList,
      songList,
      showResult,
    };
  },
});
</script>

<style lang="scss" scoped>
.input {
  width: 710px;
  height: 60px;
  border-radius: 60px;
  padding: 0 70px;
  display: block;
  margin: 0 auto;
  background: #ebecec
    url()
    no-repeat 20px center/30px 30px;
}
.m-input-box {
  padding: 30px 0;
}
.hot-search {
  padding: 0 30px;
  .title {
    font-size: 24px;
    color: #666;
    padding: 20px 0;
  }
  .key-items {
    font-size: 28px;
    color: #333;
    line-height: 64px;
    height: 64px;
    padding: 0 28px;
    border-radius: 64px;
    border: 1px solid #e0e0e0;
    margin-right: 16px;
    margin-bottom: 16px;
    box-sizing: border-box;
  }
}
</style>
